<template>
	<div>
		<div class="wcontainer">
			  <router-view v-slot="{ Component }">
				<keep-alive>
					<component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"/>
				</keep-alive>
				<component :is="Component" :key="$route.name"  v-if="!$route.meta.keepAlive"/>
				</router-view>
		</div>

		<div class="footer-container flex flexC flexCentrer" id="stepParent">
			<div
				v-for="item in footerList"
				:key="item.title"
				class="f1"
				@click="handleClick(item)"
			>
				<div class="icon-box">
					<img
						:class="item.title == 'add' ? 'footer-icon-start' : 'footer-icon'"
						:src="item.url == activeRoute ? item.active : item.icon"
					/>
					<div class="footer-active-round" v-if="item.title == 'add'"></div>
				</div>
				<div
					:class="
						item.url == activeRoute ? 'footer-title active' : 'footer-title'
					"
					v-if="item.title != 'add'"
				>
					{{ item.title }}
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getAssetsImages } from '@/utils/utils'

const router = useRouter()
const route = useRoute()

const activeRoute = ref('')
const footerList = reactive([
	{
		title: '首页',
		icon: getAssetsImages('footer', 'home.png'),
		active: getAssetsImages('footer', 'ahome.png'),
		url: '/home'
	},
	{
		title: '订单',
		icon: getAssetsImages('footer', 'order.png'),
		active: getAssetsImages('footer', 'aorder.png'),
		url: '/order'
	},
	{
		title: 'add',
		icon: getAssetsImages('footer', 'start.png'),
		active: getAssetsImages('footer', 'start.png'),
		url: '/add'
	},
	{
		title: '购物车',
		icon: getAssetsImages('footer', 'car.png'),
		active: getAssetsImages('footer', 'acar.png'),
		url: '/car'
	},
	{
		title: '我的',
		icon: getAssetsImages('footer', 'my.png'),
		active: getAssetsImages('footer', 'amy.png'),
		url: '/center'
	}
])
const handleClick = (item: { url: string }) => {
	if (item.url) {
		router.push({
			path: item.url
		})
	} else {
		router.push({
			path: '/404'
		})
	}
}
const setActiveTab = () => {
	const { path, meta } = route
	activeRoute.value = path
}

//监听路由的变化
watch(
	() => route.path,
	() => {
		//设置激活的选项卡
		setActiveTab()
	}
)
onMounted(() => {
	setActiveTab()
})
</script>
<style scoped lang="scss">
.wcontainer {
	height: calc(100vh - 110px);
	background: #f8f9fa;
}
.footer-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	height: 110px;
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.footer-icon {
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}
	.footer-title {
		font-size: 22px;
		text-align: center;
		font-weight: 500;
	}
	.footer-icon-start {
		top: -20px;
		position: absolute;
		display: block;
		width: 110px;
		height: 110px;
		left: 0;
		right: 0;
		margin: 0 auto;
		border: 10px solid #fff;
		border-radius: 50%;
		z-index: 1;
		background: #fff;
	}
	.footer-active-round {
		display: none;
		position: absolute;
		top: -14px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100px;
		height: 100px;
		background: #fff;
		border-radius: 50%;
	}
	.active {
		color: #3fae36;
	}
}
</style>
